/* 
    Document: WIAI | 2012
    Author  : Dan
*/

root { 
    display: block;
}

#main{
    position: static;
    width:  800px;
    height: 600px;
    margin: 0 auto;
    /*border: 1px solid #808080;*/
    padding: 2px;
    
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
    -moz-border-radius-topright: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
    -webkit-border-top-right-radius: 6px;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;

    box-shadow: 5px 5px 10px rgba(0,0,0,0.4);
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
}

#menu-kiri{
    font-size: 13px;
    font-family: verdana,arial,'sans serif';
    font-weight: bold;
    
    background-color: #E5EECC;
    width: 130px;
    height: 523px;
    float: left;
    /*border: 1px solid #808080;*/
    margin: 0px 0 0 -3px;
    
    /*margin-right:2px;*/
    
    /*-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.4);*/
    -moz-border-radius-topright: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    /*-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.4);*/
    -webkit-border-top-right-radius: 0px;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-bottom-left-radius: 6px;

    /*box-shadow: 5px 5px 10px rgba(0,0,0,0.4);*/
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 6px;
}

#menu-kiri-posisi{
    margin: 8px 0 0 8px;
}

/*#menu-kanan{
    width:130px;
    float:left;
    border:1px solid #808080;
    margin-left:2px;
}*/

#isi-tengah{
    width:600px;
    float:left;
    margin: 10px 0 0 35px;
    /*border:1px solid #808080;*/
    /*background-color:#ffa980;*/
}

#customers{
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0 0 0;
}
.tabel{
}

#customers td, #customers th{
    font-size: 1em;
    border: 1px solid #98bf21;
    padding: 3px 0px 2px 7px;
}
#customers th{
    font-size: 1.1em;
    text-align: left;
    padding-top: 5px;
    padding-bottom: 4px;
    /*background-color: #A9D622;*/
    background-color: #BAD36E;
    color: #ffffff;
}
#customers tr.alt td{
    color: #000000;
    background-color: #EAF2D3;
}


/*#footer{
    padding:1px;
    margin:1px;
    border:1px solid #808080;
    text-align:center;
}*/

#header{
    padding:1px;
    margin: -3px 0 0 -3px;
    /*border:1px solid #808080;*/
    text-align:center;
    width: 803px;
    height:80px;
    background-color: #BAD36E;
    
    /*-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.4);*/
    -moz-border-radius-topright: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    /*-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.4);*/
    -webkit-border-top-right-radius: 6px;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;

    /*box-shadow: 5px 5px 10px rgba(0,0,0,0.4);*/
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;

}

#header-text{
    position: absolute;
    font-family: arial;
    font-size: 20px;
    font-weight: bold;
    color: #000000;
    clear: both;
    margin: 45px 0 0 105px;
}

#logo-header{
    position: absolute;
    margin: 6px 0 0 30px;
}

#text{
    font-size: 16px;
    color: #000000;
    font-weight: bold;
    
    margin: 10px 0 0 0;
}

#tombol-tambah{
    margin: 15px 0 0px 0px;
    
}
#tombol-tambahBox{
    margin: 0 0 -40px 0px;
    padding: 6px 8px;
    color: #000;
    
    font-size: 11px;
    font-weight: normal;
    text-decoration: none;
    /*text-transform: uppercase;*/
    
    background: #fff url() repeat-x;

    /*-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.1);*/
    -moz-border-radius-topright: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
    -webkit-border-top-right-radius: 6px;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;

    /*box-shadow: 5px 5px 10px rgba(0,0,0,0.1);*/
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border: 1px solid #ccc;
}
button#tombol-tambahBox{ 
    cursor: pointer;
}

button#tombol-tambahBox:link {
    background: #fff url() repeat-x;
}

button#tombol-tambahBox:hover {
    background: #fff url() repeat-x;
    color: #FF0000;
    /*text-shadow: #ccc -1px -1px 1px;*/
}


#menubox-btn{
    float: left;
    position: relative;
    z-index: 5;
    width: 280px;
    margin: 15px 0 10px 0px;
    padding: 6px 8px;
}

#menu-btn{
    float: left;
    width: 100px;
    margin: 0 0 -40px 0px;
    padding: 6px 8px;
    color: #000;
    
    font-size: 11px;
    font-weight: normal;
    text-decoration: none;
    /*text-transform: uppercase;*/
    
    background: #fff url() repeat-x;

    /*-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.1);*/
    -moz-border-radius-topright: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
    -webkit-border-top-right-radius: 6px;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;

    /*box-shadow: 5px 5px 10px rgba(0,0,0,0.1);*/
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border: 1px solid #ccc;
}

button#menu-btn{ 
    cursor: pointer;
}

button#menu-btn:link {
    background: #fff url() repeat-x;
}

button#menu-btn:hover {
    background: #fff url() repeat-x;
    color: #FF0000;
    /*text-shadow: #ccc -1px -1px 1px;*/
}

/*====================================================*/

/*====================================================*/
/* Password Strength */
.password {
    font-family : arial, sans-serif;
}
.pstrength-minchar {
    font-size : 10px;
}

/*====================================================*/

/*====================================================*/

.clear{
    float:none;
    clear:both;
}

body{
    font-family:tahoma;
    font-size:12px;
    
    margin: 40px 0 0 0;
}

/*#menu-kiri div, #menu-kanan div{
    padding:2px;
    margin:2px;
    border:1px solid #004000;
    background-color:#ffc5a8;
}*/


/* Add Form */
#addForm {
    width: 300px; 
    /*border: 1px solid #899caa;*/
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    margin-top: -1px;
    background: #A6B6A9;
    padding: 6px;
    margin: 10px 0 0 0px;
}

#tombol_add{
    margin: 0 0 0 110px;
    
}

#addForm fieldset {
    margin: 0 0 12px 0;
    display: block;
    border: 0;
    padding: 0;
}

fieldset#body {
    background: #fff;
    border-radius: 3px;
    -moz-border-radius: 3px;
    padding: 10px 13px;
    margin: 0;
}

#addForm #checkbox {
    width: auto;
    margin: 1px 9px 0 0;
    float: left;
    padding: 0;
    border: 0;
    *margin: -3px 9px 0 0; /* IE7 Fix */
}

#body label {
    color: #3a454d;
    margin: 9px 0 0 0;
    display: block;
    float: left;
}

#addForm #body fieldset label {
    display: block;
    float: none;
    margin: 0 0 6px 0;
}

/* Default Input */
#addForm input {
    width: 92%;
    border: 1px solid #899caa;
    border-radius: 3px;
    -moz-border-radius: 3px;
    color: #3a454d;
    font-weight: bold;
    padding: 8px 8px;
    box-shadow: inset 0px 1px 3px #bbb;
    -webkit-box-shadow: inset 0px 1px 3px #bbb;
    -moz-box-shadow: inset 0px 1px 3px #bbb;
    font-size: 12px;
}

/* Password Strength */
.password {
    font-size : 12px;
    border : 1px solid #cc9933;
    width : 200px;
    font-family : arial, sans-serif;
}
.pstrength-minchar {
    font-size : 10px;
}

/* Sign In Button */
#addForm #add {
    /*width: auto;
    float: left;
    background: #339cdf url(../images/loginbuttonbg.png) repeat-x;
    color: #fff;
    padding: 5px 8px 6px 8px;
    text-shadow: 0px -1px #278db8;
    font-weight: bold;
    font-size: 12px;
    border: 1px solid #339cdf;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    margin: 0 12px 0 0;
    cursor: pointer;
    *padding: 7px 2px 8px 2px; /* IE7 Fix */
    
    float: none;
    /*position: fixed;
    
    width: 475px;
    height: 200px;
    
    margin: 15px 0 0 15px;
    padding: 10px;
    
    background: #F1FFE0;

    /*-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.4);*/
    -moz-border-radius-topright: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    /*-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.4);*/
    -webkit-border-top-right-radius: 6px;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;

    /*box-shadow: 5px 5px 10px rgba(0,0,0,0.4);*/
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    /*border: 8px solid #3399FF;*/
}

#tombolbox-btn{
    width: 280px;
    margin: 10px 0 0px 290px;
    padding: 6px 6px;
}
/*#batalbox-btn{
    width: 280px;
    margin: 10px 0 0px 320px;
    padding: 6px 6px;
}*/
#batal-btn{
    float: none;
    width: 70px;
    /*margin: 0 0 5px 120px;*/
    padding: 6px 6px;
    color: #000;
    font-size: 12px;
    font-weight: none;
    text-decoration: none;
    text-transform: none;
    background: #fff url() repeat-x;

    /*-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.1);*/
    -moz-border-radius-topright: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
    -webkit-border-top-right-radius: 6px;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;

    /*box-shadow: 5px 5px 10px rgba(0,0,0,0.1);*/
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border: 1px solid #ccc;
}
button#batal-btn{ 
    cursor: pointer;
}

button#batal-btn:link {
    background: #fff url() repeat-x;
}

button#batal-btn:hover {
    background: #fff url() repeat-x;
    color: #FF0000;
    /*text-shadow: #ccc -1px -1px 1px;*/
}
/*====================================================*/

/*====================================================*/
/*#simpanbox-btn{
    width: 280px;
    margin: -43px 0 0 385px;
    padding: 6px 6px;
}*/
#simpan-btn{
    float: none;
    width: 85px;
    /*margin: 0 0 5px 120px;*/
    padding: 6px 6px;
    color: #000;
    font-size: 12px;
    font-weight: none;
    text-decoration: none;
    text-transform: none;
    background: #fff url() repeat-x;

    /*-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.1);*/
    -moz-border-radius-topright: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
    -webkit-border-top-right-radius: 6px;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;

    /*box-shadow: 5px 5px 10px rgba(0,0,0,0.1);*/
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border: 1px solid #ccc;
}
button#simpan-btn{ 
    cursor: pointer;
}

button#simpan-btn:link {
    background: #fff url() repeat-x;
}

button#simpan-btn:hover {
    background: #fff url() repeat-x;
    color: #FF0000;
    /*text-shadow: #ccc -1px -1px 1px;*/
}


/* Forgot your password */
#addForm span {
    text-align: center;
    display: block;
    padding: 7px 0 4px 0;
}

#addForm span a {
    color: #3a454d;
    text-shadow: 1px 1px #fff;
    font-size: 12px;
}

input:focus {
    outline: none;
}